<script setup>
import { ref } from 'vue'
import Footer from '../../components/footer.vue'
import { useRouter } from 'vue-router'
const liActiveClass = ref(1)

const router = useRouter()
const goClass = () => {
    router.push('/class')
}
const goAno = () => {
    router.push('/another2')
}

const line = ref(null)
const select = (i) => {
    liActiveClass.value = i
    if (i === 1) {
        window.scrollTo(0, 0)
    }
    if (i === 2) {
        window.scrollTo(0, 1314)
    }
    if (i === 3) {
        window.scrollTo(0, 2200)
    }
    if (i === 4) {
        window.scrollTo(0, 2000)
    }
}
const check = (e) => {
    // console.log(e.target.offsetLeft);
    line.value.style.transform = `translateX(${e.target.offsetLeft - 400}px)`
    // e.target.style.color = '#FF6701'
    // console.log(window.off);
}
const leaveActive = ref(0)
const leave = (i) => {
    leaveActive.value = i
}
</script>
<template>
    <div class="total">
        <div class="headers">
            <div class="left">
                <img class="logo" src="/image/logo.png" alt="">
                <ul class="main" @click="check" ref="main">
                    <!-- <li><router-link to="/index" active-class="active" href="#top">绿萝公益平台</router-link></li>
                <li><router-link to="/" active-class="active" href="#work">公益入校服务</router-link></li>
                <li><router-link to="/another" active-class="active">证书认证查询</router-link></li>
                <li><router-link to="/" active-class="active" href="#support">科研数据支持</router-link></li> -->
                    <li><a @click="select(1)" :class="{ active: liActiveClass == 1 }">绿萝公益平台</a></li>
                    <li><a @click="select(2)" :class="{ active: liActiveClass == 2 }">公益入校服务</a></li>
                    <li><a @click="select(3)" :class="{ active: liActiveClass == 3 }">科研数据支持</a></li>
                    <div class="line" ref="line"></div>
                </ul>
            </div>
            <div class="right">
                <a @click="goAno">证书认证查询</a>
            </div>
        </div>
        <div class="header" id="top">
            <div class="center w">
                <a class="item" @click="select(1)">
                    <img src="/image/class.png" class="pic" alt="">
                    <div class="title">成长公益课</div>
                    <div class="text">开放给所有人的心理学入门课程</div>
                </a>
                <a class="item" @click="select(2)">
                    <img src="/image/class2.png" class="pic" alt="">
                    <div class="title">公益入校服务</div>
                    <div class="text">志愿者协助学校完成访谈工作</div>
                </a>
                <a class="item" @click="select(4)">
                    <img src="/image/class3.png" class="pic" alt="">
                    <div class="title">成为志愿者</div>
                    <div class="text">参与实战案例，积累宝贵经验</div>
                </a>
                <a class="item" @click="select(3)">
                    <img src="/image/class4.png" class="pic" alt="">
                    <div class="title">科研数据支持</div>
                    <div class="text">学术论文，科研数据申请</div>
                </a>
            </div>
        </div>
        <div class="class" id="class">
            <div class="w">
                <div class="class-main">
                    <div class="class-left">
                        <img src="/image/title.png" alt="">
                        <div class="list">
                            <ul>
                                <li class="li">心理学前世今生与价值意义</li>
                                <li class="li">智能时代的心理测量概述</li>
                                <li class="li">心理咨询概论与方法</li>
                            </ul>
                            <ul>
                                <li class="li">测评报告解读与分级干预</li>
                                <li class="li">对爸爸拳打脚踢的漂亮女儿</li>
                                <li class="li">心理学爱好者的进阶路径</li>
                            </ul>
                        </div>
                        <a href="#" class="btn">
                            <img src="/image/video.png" alt="">&nbsp;&nbsp;免费学习
                        </a>
                        <div class="code">
                            <div class="code-left"></div>
                            <div class="code-right">
                                →<br>支持手机扫码观看
                            </div>
                        </div>
                    </div>
                    <div class="class-right">
                        <div class="textm">心理学泰斗</div>
                        <div class="title">郑日昌教授</div>
                        <div class="textm">国内大咖坐镇，领衔专家团队协力开发</div>
                        <div class="textm">为中国校园青少年心理健康保驾护航</div>
                        <div class="title title-top"><span class="sp">15</span>+&nbsp;专家团队</div>
                        <div class="textm">专家团队由一线优秀教师、各大知名学院专家组成</div>
                    </div>
                </div>
                <div class="foot">
                    <div class="foot-left">
                        <div class="title">适合对象：</div>
                        <div class="text">对心理学感兴趣，想通过一定的学习帮助自己</div>
                        <div class="text">或有意愿通过所学知识帮助他人</div>
                    </div>
                    <div class="foot-right">
                        <div class="item">
                            <div class="head">
                                <img src="/image/t1.png" alt="">
                                <span class="name">王老师</span>
                            </div>
                            <div class="role">初中班主任</div>
                            <div class="content">郑老师的课对我们班主任来说是一份宝贵的资源，让我们可以更好地了解和支持学生的想法和需求。</div>
                        </div>
                        <div class="item">
                            <div class="head">
                                <img src="/image/t2.png" alt="">
                                <span class="name">李老师</span>
                            </div>
                            <div class="role">初中心理教师</div>
                            <div class="content">课程通过案例分析，使我能够更好地理解学生的不同视角，也让我能够将所学知识直接运用到日常指导中，为学生提供更好的支持。</div>
                        </div>
                        <div class="item">
                            <div class="head">
                                <img src="/image/t3.png" alt="">
                                <span class="name">李同学</span>
                            </div>
                            <div class="role">心理学应届毕业生</div>
                            <div class="content">这门课程内容充实，老师生动有趣，有助于学生深入理解心理学，为将来的实践奠定了坚实的基础。</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="work" id="work">
            <div class="center">
                <div class="server">
                    <div class="s-left">
                        <img src="/image/title2.png" alt="">
                        <div class="s-content">
                            <img src="/image/step.png" alt="">
                            <ul class="list">
                                <li class="list-item">认证志愿者入校服务</li>
                                <li class="list-item">与学校共同完成心理访谈工作</li>
                                <li class="list-item">访谈过程记录至学生心理档案</li>
                                <li class="list-item">访谈过程记录至学生心理档案</li>
                            </ul>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="s-right">
                        <div class="text1">当前开放申请的地区</div>
                        <div class="text2">无锡、遵义、宜昌、淮北</div>
                        <div class="text3">1. 建议同城申请，以便线下志愿服务</div>
                        <div class="text3">2. 服务为志愿性质，具体由学校约定</div>
                    </div>
                </div>
                <div class="help">
                    <div class="h-title">公益入校服务</div>
                    <div class="h-title">协助心理访谈工作</div>
                    <div class="h-text">对于需要志愿者到校协助开展测后访谈定级的学校
                        <br>可以申请此公益服务
                    </div>
                    <div class="code"></div>
                </div>
            </div>
        </div>
        <div class="volunteer" id="volunteer">
            <div class="body w">
                <div class="body-left">
                    <img src="/image/title3.png" alt="">
                    <div class="text t1">3天2夜聚焦实操</div>
                    <div class="text">70课时课程、分级干预、案例沉淀</div>
                    <div class="text">郑日昌领衔名师团队</div>
                    <div class="text">4次线上案例督导</div>
                </div>
                <div class="line"></div>
                <div class="mid">
                    <div class="title">聚焦学校场景心理健康危机预防</div>
                    <div class="title">解决7大核心难题</div>
                    <div class="list">
                        <ul>
                            <li class="item"><span class="spans">心理课程没人上，危机预防</span>&nbsp;挂嘴上！</li>
                            <li class="item"><span class="spans">预警干预不规范，费时费力</span>&nbsp;有隐患！</li>
                            <li class="item"><span class="spans">咨询转介都不会，重点个体</span>&nbsp;难应对！</li>
                            <li class="item"><span class="spans">校园欺凌管理难，不做疏导</span>&nbsp;事不断！</li>
                        </ul>
                        <ul>
                            <li class="item"><span class="spans">网络沉溺费时间，极端案例</span>&nbsp;不少见！</li>
                            <li class="item"><span class="spans">教师心理压力大，领导工作</span>&nbsp;一团麻！</li>
                            <li class="item"><span class="spans">家校共育缺思路，学校口碑</span>&nbsp;留不住！</li>
                        </ul>
                    </div>
                </div>
                <div class="btn" @click="goClass">了解详情&nbsp;→</div>
            </div>
        </div>
        <div class="support" id="support">
            <div class="w">
                <div class="title">科研数据支持</div>
                <div class="text">对于需要心理数据进行科研的专业人员，可以申请脱敏的数据样例</div>
                <div class="code"></div>
                <div class="code-text">扫码添加企微</div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<style scoped lang="scss">
.total {
    width: 100%;
    background-color: #FEA82E;
}

.headers {
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    list-style: none;

    .left {
        display: flex;
        align-items: center;

        .logo {
            width: 236px;
            height: 40px;
            margin-left: 40px;
            margin-right: 124px;
        }

        li {
            display: inline;
            width: 96px;
            height: 22px;
            margin-right: 80px;
        }
    }

    .right {
        margin-right: 80px;
        cursor: pointer;
    }

    a {
        font-size: 16px;
        font-weight: 400;
        // font-family: 'Times New Roman', Times, serif;
        // font-family: “Microsoft YaHei”;
        color: black;
        line-height: 22px;
        cursor: pointer;
    }

    a:hover {
        font-weight: 600;
        color: #FF6701;
    }

    .active {
        font-weight: 600;
        color: #FF6701;
    }

    .line {
        position: absolute;
        top: 60px;
        left: 432px;
        width: 32px;
        height: 4px;
        background-color: #FF6701;
        transition: all 0.3s linear;
        transform: translate(x, y);
    }

}

.w {
    width: 1200px;
    margin: 0 auto;
}

.header {
    position: relative;
    width: 100%;
    height: 500px;
    background: url(/image/bg1.png) no-repeat center center;

    .center {
        display: flex;
        justify-content: center;
    }

    .item {
        z-index: 998;
        display: block;
        float: left;
        margin-top: 400px;
        margin-right: 16px;
        padding: 24px;
        width: 288px;
        height: 173px;
        background: #FFFFFF;
        border-radius: 8px;
        transition: all 0.3s linear;

        .pic {
            width: 64px;
            height: 60px;
        }

        .title {
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FF6701;
            line-height: 25px;
            margin-top: 16px;
        }

        .text {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #8C8C8C;
            line-height: 16px;
            margin-top: 8px;
        }
    }

    .item:hover {
        transform: translateY(-16px);
    }
}

.class {
    position: relative;
    width: 100%;
    height: 819px;
    background: url(/image/bg2.png) no-repeat center center;

    .character {
        width: 738px;
        height: 235px;
        background-color: aqua;
    }

    .foot {
        display: flex;
        justify-content: space-between;
        height: 235px;

        .foot-left {
            padding-top: 80px;

            .title {
                height: 24px;
                font-size: 24px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 24px;
                margin-bottom: 16px;
            }

            .text {
                height: 16px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 16px;
                margin-bottom: 8px;
            }
        }

        .foot-right {
            width: 738px;
            height: 235px;

            .item {
                float: left;
                width: 230px;
                height: 235px;
                background: #FFFFFF;
                border-radius: 16px;
                margin-left: 16px;
                padding: 24px;
                transition: all 0.3s linear;

                .head {
                    height: 40px;
                    display: flex;
                    align-items: center;

                    .name {
                        font-size: 16px;
                        font-family: DingTalk-JinBuTi, DingTalk;
                        font-weight: normal;
                        color: #FF6701;
                        line-height: 60px;
                        margin-left: 16px;
                    }
                }

                .role {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FF6701;
                    margin: 10px 0;
                }

                .content {
                    width: 182px;
                    height: 60px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #8C8C8C;
                    line-height: 20px;
                }
            }

            .item:hover {
                transform: translateY(-16px);
            }
        }
    }

    .class-main {
        padding-top: 191px;
        display: flex;
        justify-content: space-between;
    }

    .class-left {
        width: 580px;
        height: 430px;

        .list {
            display: flex;
            justify-content: space-around;
            margin-bottom: 32px;
        }

        .code {
            display: flex;
            margin-top: 27px;
            height: 80px;

            .code-left {
                width: 80px;
                height: 80px;
                background: #D8D8D8;
            }

            .code-right {
                height: 18px;
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 38px;
                margin-left: 20px;
            }
        }

        .li {
            margin: 15px 0;
            height: 18px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 18px;
        }

        .btn {
            display: block;
            display: flex;
            align-items: center;
            width: 258px;
            height: 66px;
            background: #FF6701;
            border-radius: 16px;
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            padding-left: 50px;
        }

        .btn:hover {
            font-size: 26px;
            transition: all 0.3s linear;
        }
    }

    .class-right {
        padding-top: 70px;
        width: 240px;
        height: 300px;

        .textm {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 20px;
        }

        .title {
            height: 36px;
            font-size: 24px;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 36px;
            margin-bottom: 6px;

            .sp {
                height: 32px;
                font-size: 32px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 32px;
            }
        }

        .title-top {
            margin-top: 16px;
        }
    }
}

.work {
    width: 100%;
    height: 664px;
    background: url(/image/bg6.png) no-repeat center center;

    .center {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        height: 664px;
        margin: 0 auto;
        padding-top: 123px;

        .server {
            display: flex;
            width: 720px;
            height: 450px;
            background: #FFFFFF;
            border-radius: 16px;
            padding: 65px;

            .s-content {
                display: flex;
                margin-top: 37px;

                .list {
                    list-style: none;
                    margin-left: 18px;

                    .list-item {
                        font-size: 16px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #262626;
                        margin-bottom: 48px;
                        padding-top: 3px;
                    }

                    .list-item:last-child {
                        margin-bottom: 0;
                        padding-top: 0;
                    }
                }
            }

            .line {
                width: 2px;
                height: 177px;
                background-color: gray;
                margin: 0 50px;
                opacity: 0.3;
            }

            .text1 {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #595959;
            }

            .text2 {
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FF6701;
                margin: 16px 0;
            }

            .text3 {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #595959;
                margin-bottom: 8px;
            }
        }

        .help {
            margin-top: 54px;

            .h-title {
                font-size: 40px;
                font-family: DingTalk-JinBuTi, DingTalk;
                font-weight: 500;
                color: #FF6701;
                font-style: italic;
            }

            .h-text {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FF6701;
                margin-top: 27px;
            }

            .code {
                width: 120px;
                height: 120px;
                background: url(/image/code.png) no-repeat;
                margin-top: 44px;
            }
        }
    }
}

.volunteer {
    position: relative;
    width: 100%;
    height: 420px;
    background: url(/image/bg4.png) no-repeat center center;
    padding-top: 255px;

    .body {
        display: flex;
        z-index: 999;
        height: 277px;
        background: url(/image/bg5.png) no-repeat center center;
        padding: 50px;

        .body-left {
            .t1 {
                margin-top: 16px;
            }

            .text {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FF6701;
                margin-bottom: 2px;
            }
        }

        .line {
            width: 2px;
            height: 177px;
            margin: 0 70px;
            background-color: gray;
            opacity: 0.3;
        }

        .mid {
            width: 510px;

            .title {
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FF6701;
                font-style: italic;
                margin-bottom: 3px;
            }

            .list {
                width: 510px;
                display: flex;
                justify-content: space-between;
                padding-top: 20px;

                .item {
                    height: 27px;
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #FF6701;
                    line-height: 27px;

                    .spans {
                        width: 168px;
                        height: 14px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #262626;
                        line-height: 14px;
                    }
                }
            }
        }

        .btn {
            margin-left: 65px;
            width: 165px;
            height: 50px;
            background: #262626;
            border-radius: 16px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }

        .btn:hover {
            font-size: 21px;
            transition: all 0.3s linear;
        }
    }
}

.support {
    width: 100%;
    height: 664px;
    background-color: #FCECDD;

    .title {
        text-align: center;
        padding-top: 232px;
        font-size: 40px;
        font-family: DingTalk-JinBuTi, DingTalk;
        font-weight: normal;
        color: #FF6701;
    }

    .text {
        text-align: center;
        margin-top: 15px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
    }

    .code {
        margin: 0 auto;
        margin-top: 24px;
        width: 120px;
        height: 120px;
        background: url(/image/code.png) no-repeat center center;
    }

    .code-text {
        text-align: center;
        margin-top: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8C8C8C;
    }
}
</style>